<template>
  <div id="app">
      <transition :name="aniType">
          <router-view/>
      </transition>
  </div>
</template>

<script>
export default {
  name: 'app',
  data(){
    return {
      aniType:""
    }
  },
  watch:{
    $route(nv,ov){
      var nDeep = nv.path.split("/").length-1;
      var oDeep = ov.path.split("/").length-1;
      if(nDeep>oDeep){
        this.aniType = "pagein";
      }else if(nDeep<oDeep){
        this.aniType = "pageout";
      }else{
        this.aniType = "";
      }
    }
  }
  
}
</script>

<style> 
*{
  box-sizing: border-box;
}
html,body{
  background-color: #F4F4F4;
  margin: 0;
  font-size: 4.48vw;
  color: #333333;
  /* max-width: 640px;   */
  overflow: hidden; 
}
select{
   appearance:none; -moz-appearance:none; -webkit-appearance:none; 
}

h3{
  font-size: 4.48vw;
  font-weight: normal;
  margin: 0;
  padding: 0;
}
h4{
  font-size: 3.92vw;
  font-weight: normal;
  color: #333;
  margin: 0;
  padding: 0;
}
p{
  font-size: 3.36vw;
  color: #b0b0b0;
  margin: 0;
  padding: 0;
}
.pages-top{
  margin-top: 12.2vw;
}
.pages-scroll{
  overflow-y: scroll;
  height: calc(100vh - 24.4vw);
}
.pages-scroll-two{
  overflow-y: scroll;
  height: calc(100vh - 12.2vw);
}
.font{
  font-size: 4.48vw;
}
.input-css{
  width: 100%;
  margin: 2.8vw 0;
  padding: 3.92vw;
}
.button-css{
  width: 100%;
  margin: 2.8vw 0;
  padding: 3.92vw;
  background-color: #FF3600; 
  
  border: none;
  color: white;
}
.isbg{
    background-color: gainsboro;   
}
a{
  text-decoration: none;
  color: inherit;
}

.pagein-enter{
  transform: translate(100%,0);
}
.pagein-enter-active,.pagein-leave-active{
  transition: all 0.5s;
  position: absolute;
  width: 100%;
}
.pagein-enter-to,.pagein-leave{
  transform: translate(0,0);
}
.pagein-leave-to{
  transform: translate(-30%,0);
}

/*---------  */
.pageout-enter{
    transform: translate(-30%,0);
}
.pageout-enter-active,.pageout-leave-active{
    transition: all 0.5s;
    position: absolute;
    width: 100%;
}
.pageout-enter-to,.pageout-leave{
    transform: translate(0,0);
}
.pageout-leave-to{
    transform: translate(100%,0);
}
</style>
